<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="./xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #19778c, #095f88);
            background-size: 1400% 300%;
            animation: dynamics 6s ease infinite;
            -webkit-animation: dynamics 6s ease infinite;
            -moz-animation: dynamics 6s ease infinite;
            font-size: 14px;
            color: #ffffff;
            min-height: 700px;
        }
        /*登录样式*/
        .main {
            position: fixed;
            text-align: center;
            top: 182px;
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            overflow: auto; /* 显示滚动条，仅在内容溢出时显示 */
        }

        .login {
            width: 270px;
            height: 270px;
            animation: dynamics 6s ease infinite;
            -webkit-animation: dynamics 6s ease infinite;
            -moz-animation: dynamics 6s ease infinite;
            opacity: 0.9;

        }
        .row-col{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        @keyframes dynamics {
            0% {
                background-position: 0% 0%;
            }
            50% {
                background-position: 50% 100%;
            }
            100% {
                background-position: 100% 0%;
            }
        }

    </style>

</head>
<body>
<div class="main">
<div class="layui-row"  style="width: 100%;margin: auto 10%">
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 row-col" >
        <div class="login">
            <a id="ylweb" href="">
                <img style="width: 270px;height: 270px;" src="./static/img/后台管理系统.gif"/>
            </a>
            <div style="font-size: 30px">后台管理系统</div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 row-col">
        <div class="login">
            <a href="./views/tms/index.html">
                <img style="width: 270px;height: 270px;" src="./static/img/省运管.gif"/>
            </a>
            <div style="font-size: 30px">省运管数据</div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 row-col">
        <div class="login">
            <a href="./views/cmbc/index.html">
                <img style="width: 270px;height: 270px" src="./static/img/民生银行.gif">
            </a>
            <div style="font-size: 30px">民生银行银企直连</div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 row-col">
        <div class="login">
            <a href="./views/pab/index.html">
                <img style="width: 270px;height: 270px" src="./static/img/平安银行.gif">
            </a>
            <div style="font-size: 30px">平安银行银企直连</div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript" src="./static/js/three.min.js"></script>
<script src="./xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'element', "layer", 'jquery'], function () {
        const $ = layui.$, admin = layui.admin;
        let SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40;
        let container;
        let camera, scene, renderer;
        let particles, particle, count = 0;
        let windowHalfX = window.innerWidth / 2;
        let windowHalfY = window.innerHeight / 2;
        $(function () {
            init();		//初始化
            animate();	//动画效果
            getPlatWebUrl()
        });

        function getPlatWebUrl() {
            admin.req({
                url: "/platform/user/getPlatWebUrl",
                data: {},
                type: 'post',
                done: function (res) {
                    document.getElementById("ylweb").href = res.data;
                }
            });
        }

        //初始化
        function init() {
            container = document.createElement('div');	//创建容器
            document.body.appendChild(container);			//将容器添加到页面上
            camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 1500);		//创建透视相机设置相机角度大小等
            camera.position.set(0, 450, 2000);		//设置相机位置
            scene = new THREE.Scene();			//创建场景
            particles = [];
            const PI2 = Math.PI * 2;
            //设置粒子的大小，颜色位置等
            const material = new THREE.ParticleCanvasMaterial({
                color: 0x0f96ff,
                vertexColors: true,
                size: 4,
                program: function (context) {
                    context.beginPath();
                    context.arc(0, 0, 0.01, 0, PI2, true);	//画一个圆形。此处可修改大小。
                    context.fill();
                }
            });
            //设置长条粒子的大小颜色长度等
            const materialY = new THREE.ParticleCanvasMaterial({
                color: 0xffffff,
                vertexColors: true,
                size: 1,
                program: function (context) {
                    context.beginPath();
                    //绘制渐变色的矩形
                    const lGrd = context.createLinearGradient(-0.008, 0.25, 0.016, -0.25);
                    lGrd.addColorStop(0, '#16eff7');
                    lGrd.addColorStop(1, '#0090ff');
                    context.fillStyle = lGrd;
                    context.fillRect(-0.008, 0.25, 0.016, -0.25);  //注意此处的坐标大小
                    //绘制底部和顶部圆圈
                    context.fillStyle = "#0090ff";
                    context.arc(0, 0, 0.008, 0, PI2, true);    //绘制底部圆圈
                    context.fillStyle = "#16eff7";
                    context.arc(0, 0.25, 0.008, 0, PI2, true);    //绘制顶部圆圈
                    context.fill();
                    context.closePath();
                    //绘制顶部渐变色光圈
                    const rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025);
                    rGrd.addColorStop(0, 'transparent');
                    rGrd.addColorStop(1, '#16eff7');
                    context.fillStyle = rGrd;
                    context.arc(0, 0.25, 0.025, 0, PI2, true);    //绘制一个圆圈
                    context.fill();
                }
            });

            //循环判断创建随机数选择创建粒子或者粒子条
            let i = 0;
            for (let ix = 0; ix < AMOUNTX; ix++) {
                for (let iy = 0; iy < AMOUNTY; iy++) {
                    const num = Math.random() - 0.1;
                    if (num > 0) particle = particles[i++] = new THREE.Particle(material);
                    else particle = particles[i++] = new THREE.Particle(materialY);
                    //particle = particles[ i ++ ] = new THREE.Particle( material );
                    particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
                    particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
                    scene.add(particle);
                }
            }

            renderer = new THREE.CanvasRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            //document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            //document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            //document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            window.addEventListener('resize', onWindowResize, false);
        }

        //浏览器大小改变时重新渲染
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        //将相机和场景渲染到页面上
        function render() {
            let i = 0;//更新粒子的位置和大小
            for (let ix = 0; ix < AMOUNTX; ix++) {
                for (let iy = 0; iy < AMOUNTY; iy++) {
                    particle = particles[i++];
                    //更新粒子位置
                    particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
                    //更新粒子大小
                    particle.scale.x = particle.scale.y = particle.scale.z = ((Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4) * 50;	//正常情况下再放大100倍*1200
                }
            }
            renderer.render(scene, camera);
            count += 0.1;
        }
    })
</script>

</body>
</html>